import React, { useState } from 'react'
import { Button, Input, Form, Circle, Picker } from 'react-vant'
import { RemainQuery } from '../sevice/PhoneServe'
export default function Balance() {


    //form表单
    const [form] = Form.useForm()

    //清空表单
    const reset = () => {
        form.resetFields()
    }

    let [Remain, setRemain] = useState({})
    const onFinish = async (values) => {


        let { data } = await RemainQuery({
            operator: values.operator,
            phonenumber: values.phonenumber
        })

        setRemain(data.data)
        reset()
    }

    console.log(Remain);

    return (
        <div>


            <div style={{ paddingTop: 50 }}>
                <p style={{ textAlign: 'center', paddingTop: 10, fontSize: 20 }}>查询余额</p>
                <Form
                    style={{ padding: 20 }}
                    form={form}
                    onFinish={onFinish}
                    footer={
                        <div style={{ margin: '16px 16px 0' }}>
                            <Button round nativeType='submit' type='primary' block>
                                提交
                            </Button>
                        </div>
                    }>


                    <Form.Item
                        rules={[{ required: true, message: '请选择运营商' }]}
                        isLink
                        name='operator'
                        label='运营商'
                        trigger='onConfirm'
                        onClick={(_, action) => {
                            action.current?.open()
                        }}
                    >
                        <Picker
                            popup
                            columns={[
                                '中国联通',
                                '中国移动',
                                '中国电信']}>
                            {val => val || '请选择运营商'}
                        </Picker>
                    </Form.Item>


                    <Form.Item
                        rules={[{ required: true, pattern: /\d{11}/, message: '请输入11位数字' }]}
                        name='phonenumber'
                        label='手机号'
                    >
                        <Input placeholder='请输入手机号' />
                    </Form.Item>
                </Form>

                {/* 需要判断是否有查询 */}


                {Remain.balance ? <div>
                    <div style={{ textAlign: 'center', paddingTop: 10, fontSize: 20, paddingBottom: 10 }}>手机余额剩余</div>
                    <div style={{ textAlign: 'center' }}>
                        <Circle
                            color={{
                                '0%': '#3fecff',
                                '100%': '#6149f6',
                            }}
                            size={120}
                            rate={70} speed={100} text={`${Remain.balance}元`} />
                    </div>

                </div> : ''}

            </div>




        </div>
    )
}
